<template>

    <div>
        <!-- :before-close="beforeClose" -->
        <van-swipe-cell :before-close="beforeClose">
            <!-- thumb图片 -->
            <van-card class="goods-card gao" :thumb="sz.img" />

            <template>
                <div class="wy">
                    <!-- 常用单词 -->
                    <span class="btys">{{sz.bt}}</span>
                </div>
                <div class="wy2">
                    <!-- 总共多少个单词 -->
                    总共{{sz.dcs}}个单词
                </div>
            </template>
            
            <template #right v-if="cunz">
                <van-button square text="删除" type="danger" class="delete-button" />
            </template>
        </van-swipe-cell>
    </div>
</template>

<script>
import { mapMutations } from "vuex"
export default {

    props: { sz: {},cunz:{}},
    
    methods: {
        ...mapMutations(['shanchudcb']),
        // position 为关闭时点击的位置
        // instance 为对应的 SwipeCell 实例
        beforeClose({ position, instance }) {
            switch (position) {
                case 'left':
                case 'cell':
                case 'outside':
                    instance.close();
                    break;
                case 'right':
                    this.$dialog.confirm({
                        message: '确定删除吗？',
                    }).then(() => {
                        // 把id传到Vuex里，进行删除单词本
                        this.shanchudcb(this.sz.id)
                        //  调用单词本父组件方法，重新渲染单词本页面（BUG：收藏单词本的父组件不会触发此方法）
                        this.$parent.chuli()
                        console.log(this.sz, ' 删除单词本a')
                        instance.close();
                        // 接受报错并且隐藏
                    }).catch(() => { });
                    break;
            }
        },

    },
    created() {
        console.log(this.sz, 'sz')
    }

}



</script>

<style lang="less" scoped>
.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}

.gao {
    margin: 10px 0px;
    position: relative;
}
.wy {
    position: absolute;
    top: 10px;
    left: 120px;
    font-size: 20px;
    font-weight: 700;
}
.wy2 {
    position: absolute;
    top: 70px;
    left: 120px;
    font-size: 15px;
    color: rgb(158, 157, 157);
}
.btys {
    color: black;
}
</style>